<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        ready()事件
        $(document).ready(function(){
            alert("1");
        })
        $(function(){
            // 获取标签对象
            var $mytext = $("#text1");
            var $mybtn = $("#btn1");
            // 鼠标单击
            $mybtn.click(function(){
                alert("itcast");
            })
            // 元素获取焦点
            $mytext.focus(function(){
                // 原生js写法
                // this.style.background = "red";
                // jquery写法
                $(this).css({"background":"red"});
            })
            // 元素失去焦点
            $mytext.blur(function(){
                $(this).css({"background":"white"});
            })

            // 鼠标进入
            var $mydiv = $("div");
            $mydiv.mouseover(function(){
                $(this).css({"background":"red"});
            })
            // 鼠标离开
            $mydiv.mouseout(function(){
                $(this).css({"background":"white"});
            })
        })
    </script>
</head>
<body>
    <!-- <input type="text" id="text1">
    <input type="button" value="按钮" id="btn1"> -->
    <div>
        <input type="text" id="text1">
        <input type="button" value="按钮" id="btn1">
    </div>
</body>
</html>